<template>
  <transition name="slide">
    <div class="page">
      <page-header title="优惠券"></page-header>
      <div class="agreement">
      <p>不使用优惠卷</p>
        <input type="checkbox" class="regular-checkbox" checked="checked" @click="_del()"/>
      </div>
      <scroll class="content" :data="list" ref="scroll" :class="{'loading': loading}"
              :pullup="true" :pulldown="true" @scrollToEnd="_more" @pullingDown="_refash" >
        <ul class="list">
          <li v-for="(item, index) in list" :key="index" class="item" @click="_turn(item.bean.discount, item.bean.id)">
            <p class="name">{{item.bean.coupon.name}}</p>
            <div class="info">
              <p class="date"><span>有效期：</span><span>{{item.bean.overTime}}</span></p>
              <p class="name"><span>状态：</span><span>{{item.bean.status === '1' ? '已使用' : '未使用'}}</span></p>
              <p class="name" v-if="item.bean.coupon.type == 1"><span>活动：</span><span>{{item.bean.activity.name}}</span></p>
            </div>
            <p class="value" ><span>{{item.bean.discount}}</span>元优惠券</p>
          </li>
        </ul>
      </scroll>
      <p class="nomore" v-if="nomore">没有更多</p>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import Scroll from 'components/scroll/scroll'
  import * as exampleApi from 'api/example'
  export default {
    components: {
      PageHeader,
      Scroll
    },
    data () {
      return {
        list: [],
        id: '',
        discount: '',
        page: 1,
        pageSize: 5,
        type: '',
        text: '',
        loading: false,
        nomore: false
      }
    },
    created() {
      this._initData()
    },
    methods: {
      _more() {
        if (this.nomore) {
          return
        }
        this.page ++
        this._initData()
      },
      _refash() {
        this.page = 1
        this.loading = true
        this.nomore = false
        this._initData()
      },
      _initData() {
        exampleApi.modePost('/api/public/wz/activity/myCoupon', ({
          humanId: sessionStorage.getItem('studentId'),
          status: 0,
          actId: this.$route.params.id,
          pageNo: this.page,
          pageSize: this.pageSize
        }))
          .then(res => {
            if (res.data.data.rows.length === 0) {
              this.nomore = true
            }
            if (this.page === 1) {
              this.list = res.data.data.rows
            } else if (this.page > 1) {
              this.list = this.list.concat(res.data.data.rows)
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      _turn(discount, couponId) {
        window.sessionStorage.setItem('discount', discount)
        window.sessionStorage.setItem('couponId', couponId)
        console.log(this.$route.params.id)
        this.$router.push({
          path: `/activity/signup` + this.$route.params.id
        })
      },
      _del() {
        sessionStorage.removeItem('discount')
        console.log(this.$route.params.id)
        this.$router.push({
          path: `/activity/signup` + this.$route.params.id
        })
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .checkbox-box{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    margin-right: 10px;
    position: relative;
  }
  .agreement {
    margin-top: 20px;
    height: 80px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 25px;
    p {
      font-size: 22px;
      color: #999999;
    }
  }
  .regular-checkbox  {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
  }
  .button {
    width: 100px;
    height: 40px;
    background-color: #419eff;
    border-radius: 6px;
    line-height: 40px;
    text-align: center;
    color: #fff;
  }
  .page {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .content{
      position: relative;
      height:calc(~"100% - 84px");
      overflow: hidden;
      &::after {
        position: absolute;
        display: none;
        content: '';
        top: 10px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        background: url('../../assets/image/loading.gif') no-repeat center / 40px auto;
      }
      .list{
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
      }
      .item{
        position: relative;
        width: 100%;
        height: 210px;
        background-color: #ffffff;
        box-sizing:border-box;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: PingFang;
        background: url('../../assets/image/personal/ticket_green.png') no-repeat center / 100% 100%;
        &:nth-child(2n) {
          background-image: url('../../assets/image/personal/ticket_blue.png');
        }
        padding: 16px 0;
        padding-left: 236px;
        .name{
          font-size: 26px;
          font-weight: bold;
          color: #161616;
        }
        .info{
          flex: 1;
          p{
            display: flex;
            margin-top: 16px;
            span{
              font-size: 19px;
              color: #555555;
              &:nth-child(1){
                width: 86px;
              }
              &:nth-child(2){
                color: #5a78ff;
              }
            }
          }
        }
        .value{
          font-size: 20px;
          color: #cccccc;
          span{
            font-size: 34px;
            color: #ff5c2a;
            letter-spacing: 5px;
            margin-right: 20px;
            font-family: 'PingFang-SC';
          }
        }
      }
      .nomore{
        font-size: 22px;
        color: #999999;
        text-align: center;
        padding-bottom: 20px;
      }
    }
    .content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
